<template>
	<view class="content">
		<!-- <search></search> -->
		<!-- 搜索框 -->
	<!-- 	<view class="top-search">
			<view class="search-right">
				<navigator url="search-common">
					<uni-icons type="search" size="14" class="icons1"></uni-icons><input type="text" value=""
						placeholder="想要发什么？" />
				</navigator>
			</view>
		</view> -->
	<view class="top-search">
		<view class="search-right">
			<uni-icons type="search" size="14" class="icons1"></uni-icons>
			<input type="text" value="" placeholder="想要发什么？" />
			<text @click="searchs" class="sousuos">搜索</text>
		</view>
	</view>
		<!-- 搜索记录 -->
		<view class="jilu">
			<view class="ji-title">
				热门搜索
			</view>
			<view class="ji-content">
				<view v-for="(item,index) in search_criteria"
					:class="[item.selects==true ? 'ji-content2':'ji-content1']" @click="select(index)">{{item.name}}
				</view>
			</view>
			<view>
				<uni-icons type="reload" size="10" color="#DDDDDD" style="margin-left: 298rpx;margin-right: 18rpx">
				</uni-icons>
				<text class="huanyipi">换一批</text>
			</view>
		</view>
		<!-- 最近搜索 -->
		<view class="recently">
			<view class="recently-title">
				<view class="recently-title1">最近搜索</view>
				<view class="recently-title2">
					<uni-icons type="trash" size="12" color="#fcad22" style="margin-right: 5rpx;"></uni-icons>
					清空
				</view>
			</view>
			<view class="recently-content">
				<view class="recently-content1" v-for="item in search_criteriad">
					<uni-icons type="reload" size="10" style="margin-right: 14rpx;" color="#CCCCCC"></uni-icons>
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from "@/components/jm-search/jm-search.vue"
	export default {
		data() {
			return {
				gjc:'',
				search_criteria: [{
						"name": '全部',
						"selects": true
					},
					{
						"name": '皮草',
						"selects": false
					},
					{
						"name": '模型',
						"selects": false
					},
					{
						"name": 'Cosplay',
						"selects": false
					},
					{
						"name": '手办',
						"selects": false
					},
					{
						"name": '全部成员',
						"selects": false
					},
				],
				search_criteriad: ['全部', '青岛', '小乔'],
			};
			components: {
				uniPagination
			}

		},
		methods: {
			select(i) {
				this.search_criteria.forEach((el, index) => {
					if (i == index) {
						el.selects = !el.selects
					} else {
						el.selects = false
					}
				})
			},
			searchs(){
				uni.navigateTo({
					url: 'search-common'
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		min-width: 722rpx;

		.top-search {
			width: 100%;
			margin: 18rpx 25rpx;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;


			.search-right {
				// background: #f5f5f5 url('../../static/search.png') no-repeat 25rpx 25rpx;
				font-size: 25rpx;
				background-size: 25rpx 25rpx;
				width: 699rpx;
				height: 72rpx;
				border: 2px solid #fcda22;
				border-radius: 36rpx 36rpx 36rpx 36rpx;

				.icons1 {
					position: absolute;
					margin: 23rpx 25rpx;
				}

				input {
					width: 380rpx;
					text-align: left;
					margin-left: 69rpx;
					margin-top: 18rpx;
					font-size: 25rpx;
					float: left;
					color: #000000;
				}

				.sousuos {
					width: 123rpx;
					height: 72rpx;
					background: #FCDA22;
					opacity: 1;
					border-radius: 0px 23rpx 23rpx 0px;
					float: right;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 72rpx;
					color: #21201D;
					opacity: 1;
					text-align: center;
				}
			}
		}

		// 搜索记录
		.jilu {
			margin: 43rpx 25rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.ji-title {
				font-size: 25rpx;
				font-weight: 600;
			}

			.ji-content {
				font-size: 21rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: end;
				margin-top: 34rpx;

				.ji-content1,
				.ji-content2 {
					// width: 97rpx;
					height: 50rpx;
					background-color: #F5f5f5;
					border-radius: 27rpx;
					text-align: center;
					margin-bottom: 39rpx;
					padding: 0rpx 27rpx;
					line-height: 50rpx;
					margin-right: 18rpx;

					color: #21201D;
					opacity: 0.68;
				}

				.ji-content2 {
					background: linear-gradient(90deg, #FCCA22 0%, #FFE246 100%);
					opacity: 1;
				}
			}

			.huanyipi {
				font-size: 21rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #DDDDDD;
				opacity: 1;
			}
		}

		// 最近搜索
		.recently {
			margin: 43rpx 25rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.recently-title {
				font-size: 25rpx;
				font-weight: 600;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-bottom: 21rpx;
				border-bottom: 1px solid #F8F8F8;

				.recently-title2 {
					color: #fcad22;
				}
			}

			.recently-content {
				line-height: 65rpx;
				font-size: 25rpx;
				color: 21201d;


			}
		}
	}

	.recently-content1 {
		width: 699rpx;
		height: 79rpx;
		border-bottom: 1px solid #F8F8F8;
		line-height: 79rpx;

		color: #21201D;
		opacity: 0.8;
	}
</style>
